<template>
  <div>
  <div class="title">热销推荐</div>
  <ul>
    <router-link
    class="item border-bottom"
    v-for="item of list"
    :key="item.id"
    :to="'/detail/' + item.id">
      <div class="item-img-wrapper">
        <img class="item-img" :src="item.imgUrl" />
      </div>
      <div class="item-info">
        <p class="item-title">{{item.title}}</p>
        <p class="item-desc">{{item.desc}}</p>
        <button class="item-button">详情页</button>
      </div>
    </router-link>
  </ul>
  </div>
</template>

<script>
  export default{
    name:'tuijian03',
    props:{
      list:Array,
    },
  }
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  @import '~styles/varibles.styl'
  .title
    line-height :.4rem
    background :$bgcolor
    text-indent: .2rem
    text-align :center
  .item
    overflow :hidden
    display :flex
    height :1.9rem
    .item-img
      width :1.7rem
      height :1.7rem
      padding : .1rem
    .item-info
      flex : 1
      padding : .1rem
      min-width :0
      .item-title
        line-height : .54rem
        font-size : .32rem
        ellipsis()
      .item-desc
        line-height :.4rem
        color : #CCCCCC
        ellipsis()
      .item-button
        line-height :.44rem
        margin-top :.16rem
        background :$bgcolor
        padding  :0 .15rem
        border-radius : .08rem
        color :#ffffff
        font-weight: bold
        box-shadow: .01rem .01rem .05rem #85c8c8


</style>
